<template>
  <div class="recordlist">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formData.orderNo" placeholder="订单号" clearable style="width: 160px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" clearable style="width: 400px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchHandle">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="total">
      <ul>
        <li>
          <span>糖果统计</span>
          <span class="nums">{{recordSweetSum}}</span>
        </li>
        <li>
          <span>暂存金额</span>
          <span class="nums">{{temporaryStorageAmount}}</span>
        </li>
        <li>
          <span>现金统计</span>
          <span class="nums">{{recordAmountSum}}</span>
        </li>
      </ul>
    </div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="merchantId" label="商家ID" align="center" width="80">
      </el-table-column>
      <el-table-column prop="orderNo" label="订单号" align="center">
      </el-table-column>
      <el-table-column prop="mobile" label="用户手机号" align="center">
      </el-table-column>
      <el-table-column prop="allocationRatio" label="分配比例" align="center">
      </el-table-column>
      <el-table-column prop="distributionAmount" label="分配金额" align="center">
      </el-table-column>
      <el-table-column prop="distributionSweet" label="分配糖果" align="center">
      </el-table-column>
      <el-table-column prop="temporaryStorageAmount" label="暂存金额" align="center">
      </el-table-column>
      <el-table-column prop="serviceChargeRatio" label="服务费比例" align="center">
      </el-table-column>
      <el-table-column prop="state" label="是否清算" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.state==0?"未清算":"已清算"}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" align="center" width="160">
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination :page-size="formData.size" :current-page.sync="formData.page" layout="prev, pager, next,total,jumper"
        :total="total" background @current-change="currentChange">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        date:[],
        formData: {
          page: 1,
          size: 10,
          merchantId: '',
          orderNo: '',
          startDate:'',
          endDate:''
        },
        recordAmountSum: 0,//现金统计
        recordSweetSum: 0,//糖果统计
        temporaryStorageAmount: 0,//暂存金额
        total: 0,
        tableData: [],
      }
    },
    mounted() {
	  this.formData.merchantId = localStorage.getItem('merchantId');
      this.getData();
	  this.getrecordStatistics();
    },
    methods: {
      getData() {
        this.formData.startDate =this.date==null?'':this.date[0];
        this.formData.endDate = this.date==null?'':this.date[1];
        this.$http.get(this.$api.recordList, this.formData).then(res => {
          this.tableData = res.data;
          this.total = res.extraInfo;
        })
      },
      getrecordStatistics(){
        this.formData.startDate =this.date==null?'':this.date[0];
        this.formData.endDate = this.date==null?'':this.date[1];
        this.$http.get(this.$api.recordStatistics, this.formData).then(res => {
          this.recordAmountSum = res.data.recordAmountSum;
          this.recordSweetSum = res.data.recordSweetSum;
          this.temporaryStorageAmount = res.data.temporaryStorageAmount;
        })
      },
      currentChange(val) {
        this.formData.page = val;
        this.getData();
      },
      searchHandle() {
        this.formData.page = 1;
        this.getData();
		this.getrecordStatistics();
      },
    }
  }
</script>

<style scoped>
  .recordlist {
    padding: 15px;
  }

  .page {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .total ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
    color: #555;
  }

  .total ul li {
    margin: 0 15px;
  }

  .total ul li .nums {
    font-size: 24px;
    font-weight: bold;
    color: red;
    padding-left: 8px;
  }
</style>
